<template>
  <div class="app-container" style="width: 800px;margin: 30px auto">
    <h3>基本信息</h3>
    <el-form label-width="160px" :model="info" ref="infoForm" :rules="infoRules">
      <el-row>
        <el-col>
          <el-form-item label="病例号：" prop="medical_record_num">
            <el-input v-model="info.medical_record_num" clearable style="width: 70%" placeholder="请输入您的病例号"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="姓名：" prop="user_name">
            <el-input v-model="info.user_name" clearable style="width: 70%;" placeholder="请输入您的姓名"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
        <el-form-item label="年龄：" prop="age">
          <el-input-number :min="1" controls-position="right" v-model="info.age" placeholder="请输入您的年龄" class="all"/>
        </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别：" prop="gender">
          <el-radio-group v-model="info.gender" class="all">
            <el-radio model-value="1" label="男"></el-radio>
            <el-radio model-value="0" label="女"></el-radio>
          </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
        <el-form-item label="身高(cm)：" prop="height">
          <el-input-number :min="0" controls-position="right" v-model="info.height" placeholder="请输入您的身高" class="all"/>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="体重(kg)：" prop="weight">
          <el-input-number :min="0" controls-position="right" v-model="info.weight" placeholder="请输入您的体重" class="all"/>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
        <el-form-item label="脉搏(次/分)：" prop="pulse">
          <el-input-number :min="0" controls-position="right"  v-model="info.pulse" placeholder="请输入您的脉搏测量值" class="all"/>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="血压(mmHg)：" prop="blood_pressure">
          <el-input v-model="info.blood_pressure" placeholder="请输入您的血压测量值" class="all input-center" />
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="primary" style="margin: 30px auto;" @click="next(infoForm)">下一步</el-button>
      </el-row>
    </el-form>
  </div>
  <el-button type="primary" plain style="position: absolute; top: 50px; right: 120px;" @click="goHistory">过往患者数据库</el-button>

  <el-row>
    <el-col :span="8" :offset="8">
      <el-steps style="max-width: 600px" :active="active" finish-status="success">
        <el-step title="Step 1" />
        <el-step title="Step 2" />
        <el-step title="Step 3" />
      </el-steps>
    </el-col>
  </el-row>
  
</template>

<script lang="ts" setup>
import { getToken, setToken, removeToken, getCacheInfo, cacheInfo, removeCacheInfo } from '@/utils/auth'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import useUserStore from '/src/store/modules/user'
import {useRouter} from "vue-router";



const userStore = useUserStore()
const router = useRouter()
interface Info{
  medical_record_num: string
  user_name: string
  age: number
  gender: string
  height: number
  weight: number
  pulse: number
  blood_pressure: string
}

// const info = reactive<Info>({
//   medical_record_num: null,
//   user_name: null,
//   age: null,
//   gender: null,
//   height: null,
//   weight: null,
//   pulse: null,
//   blood_pressure: null
// })

const info = reactive<Info>(getCacheInfo())
console.log("info",info)

const infoForm = ref<FormInstance>()

const infoRules = reactive<FormRules<Info>>({
  medical_record_num:[
    { required:true, trigger: "blur", message: "请输入您的病例号"}
  ],
  user_name: [
    { required: true, trigger: "blur", message: "请输入您的姓名" }
  ],
  age: [
    { required: true, trigger: "blur", message: "请输入您的年龄" }
  ],
  gender: [
    { required: true, trigger: "change", message: "请输入您的性别" }
  ],
  height:[
    { required:true, trigger: "blur", message: "请输入您的身高"}
  ],
  weight: [
    { required: true, trigger: "blur", message: "请输入您的体重" }
  ],
  pulse: [
    { required: true, trigger: "blur", message: "请输入您的脉搏" }
  ],
  blood_pressure: [
    { required: true, trigger: "change", message: "请输入您的血压" }
  ]
})

const next = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("info",info)
      cacheInfo(info);
      router.push({ path: "/step2" });
    } else {
      console.log('error submit!', fields)
    }
  })
}

const goHistory = () => {
  router.push({ path: "/history" });
}
</script>

<style>
.all {
  width: 100%;
}

.input-center input{
  text-align: center !important;
}
</style>
